<template>
  <div class="videoList">
    <list-header :option-list="options" :type="1"></list-header>
    <section>
      <ul class="section">
        <li v-for="video in videoList" :key="video.name">
          <div class="poster" @click="play(video.playUrl)">
            <div class="imgBox">
              <img :src="video.imgUrl" />
              <div class="mask">
                <span>{{ video.duration }}</span>
              </div>
            </div>
            <span class="title" :title="video.name">{{ video.name }}</span>
          </div>
          <ul class="footer">
            <li class="author">{{ video.author }}</li>
            <li class="hot">
              <img src="img/Mango.png" />
              <span>{{ video.hot }}</span>
            </li>
          </ul>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
import ListHeader from "./assistComponents/listHeader.vue";
export default {
  name: "videoList",
  data() {
    return {
      options: [
        { name: "日榜", isActive: true },
        { name: "周榜", isActive: false },
        { name: "月榜", isActive: false }
      ]
    };
  },
  props: {
    videoList: {
      type: Array,
      default: []
    }
  },
  components: {
    ListHeader
  },
  methods: {
    play(playUrl) {
      this.$router.push({ path: "/play" });
    }
  }
};
</script>

<style lang="less" scoped>
.videoList {
  width: 80%;

  section {
    width: 100%;
    height: calc(100% - 30px);
    display: flex;
    justify-content: center;
    margin-top: 8px;
  }

  ul.section {
    display: grid;
    grid-template-rows: repeat(2, 50%);
    grid-template-columns: repeat(5, 18%);
    justify-content: space-between;
    height: 100%;
    width: 61%;
    margin: 0 auto;

    li {
      font-size: 0.9em;
      height: 100%;
    }

    .poster {
      cursor: pointer;
      overflow: hidden;
      height: 75%;

      .imgBox {
        border-radius: 3px;
        width: 100%;
        height: 80%;
        position: relative;

        img {
          width: 100%;
          height: 100%;
        }

        .mask {
          display: none;
        }

        &:hover {
          .mask {
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.5);

            span {
              position: absolute;
              bottom: 0;
              right: 5px;
              color: #fff;
            }
          }
        }
      }

      span.title {
        white-space: nowrap;

        &:hover {
          color: #e74c3c;
        }
      }
    }

    .footer {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 5px;

      .author {
        color: rgba(0, 0, 0, 0.5);

        &:hover {
          cursor: pointer;
          color: #e74c3c;
        }
      }

      .hot {
        img {
          padding: 1px 6px 0 0;
        }

        span {
          color: #f1c40f;
          float: right;
        }
      }
    }
  }
}
</style>